<template>
  <div id="app">
    <vue-progress-bar></vue-progress-bar>
    <app-header></app-header>

    <main class="main">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import AppHeader from "@com/layout/AppHeader";
import AppFooter from "@com/layout/AppFooter";

export default {
  components: {
    AppHeader,
    AppFooter
  },
  created() {
    this.$router.beforeEach((to, from, next) => {
      this.$Progress.start();
      next();
    }),
    this.$router.afterEach((to, from) => {
      this.$Progress.finish();
    });
  }
};
</script>

<style lang="scss">
.main {
  padding-top: 1.333333rem;
  width: 100%;
  height: 100%;
}
</style>
